<template>
    <div class="count-page">
        <!-- 标题与介绍 -->
        <ToolHeader :title="title" :subtitle="subtitle"/>

        <div class="content-box">
            <!-- 输入框 -->
            <div class="input-row">
                <span>输入文本：</span>
                <el-input
                        v-model="inputText"
                        type="textarea"
                        rows="8"
                        placeholder="请输入要统计的文本"
                        class="input-text"
                />
            </div>

            <!-- 统计结果展示 -->
            <div class="stats-section">
                <div><strong>总字数：</strong> {{ stats.totalCount }}</div>
                <div><strong>字符：</strong> {{ stats.characterCount }}</div>
                <div><strong>行数：</strong> {{ stats.lineCount }}</div>
                <div><strong>数字：</strong> {{ stats.numberCount }}</div>
                <div><strong>字母：</strong> {{ stats.letterCount }}</div>
            </div>

            <!-- 提示说明 -->
            <div class="notice">
                注意：此工具用于统计文本中的总字数、字符数量、行数、数字和字母数量，适合写作或格式校验使用。
            </div>
        </div>
    </div>
</template>

<script setup>
import {ref, onMounted, watch} from 'vue'
import {get, post} from '@/net/index.js'
import {ElMessage} from 'element-plus'
import ToolHeader from '@/components/ToolHeader.vue'
import {debounce} from 'lodash'

// 标题与副标题
const title = ref('')
const subtitle = ref('')

// 输入内容
const inputText = ref('其實沒食言 分開也是一種永遠')

//统计结果
const stats = ref({
    totalCount: '',
    characterCount: '',
    lineCount: '',
    numberCount: '',
    letterCount: ''
})

// 加载标题与介绍
function loadTitleAndSubtitle() {
    get(
        '/api/textTool/getInfo?path=Count',
        (data) => {
            if (data) {
                title.value = data.title || title.value
                subtitle.value = data.introduction || subtitle.value
            }
        },
        (msg) => {
            ElMessage.error('获取工具信息失败：' + msg)
        }
    )
}

function getFetchCountResult() {
    if (!inputText.value.trim()) {
        stats.value = {
            totalCount: 0,
            characterCount: 0,
            lineCount: 0,
            numberCount: 0,
            letterCount: 0
        }
        return
    }
    post(
        '/api/textTool/getCountResult',
        {text: inputText.value},
        (data) => {
            stats.value = data
        },
        (message) => {
            ElMessage.error('统计失败' + message)
        }
    )
}

const fetchCountResult = debounce(getFetchCountResult, 500)

watch(inputText, () => {
    fetchCountResult()
})

onMounted(() => {
    loadTitleAndSubtitle()
    getFetchCountResult()
})
</script>

<style scoped>
.count-page {
    width: 100%;
    padding: 1rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.content-box {
    width: 100%;
    max-width: 30rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.input-row {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.input-text {
    width: 100%;
    max-width: 30rem;
}

.stats-section {
    margin-top: 1rem;
    font-size: 1.1rem;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.notice {
    margin-top: 1rem;
    color: #999;
    font-size: 0.95rem;
    line-height: 1.5;
}
</style>